<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="header-content">
        <text class="header-title">我的</text>
        <view class="header-actions">
          <view class="action-button" @click="openSettings">
            <text class="fas fa-cog action-icon"></text>
          </view>
          <view class="action-button notification-button" @click="openNotifications">
            <text class="fas fa-bell action-icon"></text>
            <view class="notification-dot"></view>
          </view>
        </view>
      </view>

      <!-- Merchant Profile -->
      <view class="merchant-profile">
        <view class="merchant-avatar">
          <text class="fas fa-store avatar-icon"></text>
        </view>
        <view class="merchant-info">
          <text class="merchant-name">优选数码旗舰店</text>
          <text class="merchant-id">商家ID: M2025010001</text>
          <view class="merchant-tags">
            <view class="tag verified">已认证</view>
            <text class="merchant-level">店铺等级: 金牌商家</text>
          </view>
        </view>
        <view class="edit-button" @click="editProfile">
          <text class="fas fa-edit edit-icon"></text>
        </view>
      </view>
    </view>

    <!-- Scrollable Content -->
    <scroll-view class="main-content" scroll-y="true">
      <!-- Quick Stats -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">经营概况</text>
          </view>
        </view>
        <view class="stats-grid">
          <view class="stat-card blue-stat">
            <text class="stat-value">98.5%</text>
            <text class="stat-label">好评率</text>
          </view>
          <view class="stat-card green-stat">
            <text class="stat-value">4.9</text>
            <text class="stat-label">店铺评分</text>
          </view>
          <view class="stat-card purple-stat">
            <text class="stat-value">2年</text>
            <text class="stat-label">入驻时长</text>
          </view>
        </view>
      </view>

      <!-- Account Management -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">账户管理</text>
          </view>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="openCompanyInfo">
            <view class="menu-icon blue-icon">
              <text class="fas fa-building icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">企业资料</text>
              <text class="menu-desc">营业执照、认证信息</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>

          <view class="menu-item" @click="openBankInfo">
            <view class="menu-icon green-icon">
              <text class="fas fa-university icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">银行账户</text>
              <text class="menu-desc">收款账户、结算信息</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>
        </view>
      </view>

      <!-- Store Management -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">店铺管理</text>
          </view>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="openStoreSettings">
            <view class="menu-icon indigo-icon">
              <text class="fas fa-store icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">店铺设置</text>
              <text class="menu-desc">店铺信息、logo、简介</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>

          <view class="menu-item" @click="openDeliverySettings">
            <view class="menu-icon cyan-icon">
              <text class="fas fa-shipping-fast icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">物流配送</text>
              <text class="menu-desc">配送范围、运费设置</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>

          <view class="menu-item" @click="openPaymentSettings">
            <view class="menu-icon green-icon">
              <text class="fas fa-credit-card icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">支付设置</text>
              <text class="menu-desc">支付方式、费率配置</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>
        </view>
      </view>

      <!-- Business Tools -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">商务工具</text>
          </view>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="openInvoiceCenter">
            <view class="menu-icon red-icon">
              <text class="fas fa-file-invoice icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">发票管理</text>
              <text class="menu-desc">开票信息、发票记录</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>

          <view class="menu-item" @click="openDataExport">
            <view class="menu-icon purple-icon">
              <text class="fas fa-download icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">数据导出</text>
              <text class="menu-desc">订单、财务、客户数据</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>
        </view>
      </view>

      <!-- Help & Support -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">帮助支持</text>
          </view>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="openHelpCenter">
            <view class="menu-icon gray-icon">
              <text class="fas fa-question-circle icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">帮助中心</text>
              <text class="menu-desc">常见问题、操作指南</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>

          <view class="menu-item" @click="openCustomerService">
            <view class="menu-icon green-icon">
              <text class="fas fa-headset icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">在线客服</text>
              <text class="menu-desc">7×24小时专属服务</text>
            </view>
            <view class="menu-status">
              <view class="status-dot"></view>
              <text class="status-text">在线</text>
              <text class="fas fa-chevron-right chevron"></text>
            </view>
          </view>

          <view class="menu-item" @click="openFeedback">
            <view class="menu-icon orange-icon">
              <text class="fas fa-comment-alt icon"></text>
            </view>
            <view class="menu-content">
              <text class="menu-title">意见反馈</text>
              <text class="menu-desc">产品建议、问题反馈</text>
            </view>
            <text class="fas fa-chevron-right chevron"></text>
          </view>

          <!-- Logout Button -->
          <view class="logout-button" @click="logout">
            <text class="fas fa-sign-out-alt logout-icon"></text>
            <text class="logout-text">退出登录</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      merchantInfo: {
        name: '优选数码旗舰店',
        id: 'M2025010001',
        level: '金牌商家',
        verified: true
      }
    }
  },

  onLoad() {
    this.loadMerchantInfo()
  },

  methods: {
    loadMerchantInfo() {
      // 模拟从本地存储加载商家信息
      try {
        const merchantData = uni.getStorageSync('merchantData')
        if (merchantData) {
          this.merchantInfo = { ...this.merchantInfo, ...merchantData }
        }
      } catch (e) {
        console.log('加载商家信息失败:', e)
      }
    },

    editProfile() {
      uni.showModal({
        title: '编辑资料',
        content: '可以修改：\n• 店铺名称\n• 店铺简介\n• 联系方式\n• 头像logo',
        showCancel: false
      })
    },

    openSettings() {
      uni.showModal({
        title: '设置中心',
        content: '包含：\n• 通知设置\n• 隐私设置\n• 语言设置\n• 主题设置',
        showCancel: false
      })
    },

    openNotifications() {
      uni.showModal({
        title: '消息通知',
        content: '类型：\n• 系统通知\n• 订单提醒\n• 营销活动\n• 政策更新',
        showCancel: false
      })
    },

    openCompanyInfo() {
      uni.navigateTo({
        url: '/pages/company/info/info'
      })
    },

    openBankInfo() {
      uni.navigateTo({
        url: '/pages/bank/info/info'
      })
    },

    openStoreSettings() {
      uni.navigateTo({
        url: '/pages/store/settings/settings'
      })
    },

    openDeliverySettings() {
      uni.navigateTo({
        url: '/pages/delivery/settings/settings'
      })
    },

    openPaymentSettings() {
      uni.navigateTo({
        url: '/pages/payment/settings/settings'
      })
    },

    openInvoiceCenter() {
      uni.navigateTo({
        url: '/pages/invoice/center/center'
      })
    },

    openDataExport() {
      uni.navigateTo({
        url: '/pages/data/export/export'
      })
    },

    openHelpCenter() {
      uni.navigateTo({
        url: '/pages/help/center/center'
      })
    },

    openCustomerService() {
      uni.navigateTo({
        url: '/pages/customer/service/service'
      })
    },

    openFeedback() {
      uni.navigateTo({
        url: '/pages/feedback/feedback'
      })
    },

    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？\n\n退出后需要重新登录才能访问商家功能。',
        success: (res) => {
          if (res.confirm) {
            try {
              uni.removeStorageSync('merchantData')
              uni.reLaunch({
                url: '/pages/admin/login/login'
              })
            } catch (e) {
              console.log('退出登录失败:', e)
              uni.showToast({
                title: '退出失败',
                icon: 'none'
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header Styles */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30rpx;
  color: white;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.action-button {
  position: relative;
  padding: 16rpx;
}

.action-icon {
  font-size: 40rpx;
  color: white;
}

.notification-dot {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #f44336;
  border-radius: 50%;
}

/* Merchant Profile */
.merchant-profile {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 24rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
}

.merchant-avatar {
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32rpx;
}

.avatar-icon {
  font-size: 48rpx;
  color: white;
}

.merchant-info {
  flex: 1;
}

.merchant-name {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  color: white;
}

.merchant-id {
  display: block;
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 12rpx;
  color: white;
}

.merchant-tags {
  display: flex;
  align-items: center;
}

.tag {
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 50rpx;
  margin-right: 16rpx;
}

.verified {
  background-color: #4caf50;
  color: white;
}

.merchant-level {
  font-size: 24rpx;
  opacity: 0.8;
  color: white;
}

.edit-button {
  padding: 16rpx;
}

.edit-icon {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* Main Content */
.main-content {
  flex: 1;
}

.section {
  padding: 30rpx;
}

.section-header {
  margin-bottom: 24rpx;
}

.section-title {
  display: flex;
  align-items: center;
}

.title-bar {
  width: 8rpx;
  height: 32rpx;
  background: linear-gradient(135deg, #5c6bc0, #7e57c2);
  border-radius: 4rpx;
  margin-right: 15rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.stat-card {
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  border: 2rpx solid;
}

.blue-stat {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-color: #bbdefb;
}

.green-stat {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-color: #c8e6c9;
}

.purple-stat {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border-color: #e1bee7;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  color: #333;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* Menu List */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.menu-item {
  background-color: white;
  border-radius: 16rpx;
  border: 2rpx solid #e5e7eb;
  padding: 24rpx;
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.blue-icon { background-color: #2196f3; }
.green-icon { background-color: #4caf50; }
.indigo-icon { background-color: #5c6bc0; }
.cyan-icon { background-color: #00bcd4; }
.red-icon { background-color: #f44336; }
.purple-icon { background-color: #9c27b0; }
.gray-icon { background-color: #757575; }
.orange-icon { background-color: #ff9800; }

.icon {
  font-size: 32rpx;
  color: white;
}

.menu-content {
  flex: 1;
}

.menu-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
  color: #333;
}

.menu-desc {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.chevron {
  font-size: 24rpx;
  color: #9ca3af;
}

/* Customer Service Status */
.menu-status {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #4caf50;
  border-radius: 50%;
  margin-right: 8rpx;
}

.status-text {
  font-size: 24rpx;
  color: #4caf50;
  margin-right: 16rpx;
}

/* Logout Button */
.logout-button {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  border: 2rpx solid #ffcdd2;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16rpx;
}

.logout-icon {
  font-size: 28rpx;
  color: #f44336;
  margin-right: 16rpx;
}

.logout-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #f44336;
}

/* FontAwesome Icons */
.fas {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
</style>